<template>
  <div class="tip">
        <mt-header fixed title="图片分享">
            <router-link to="/Home" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
            <mt-button icon="more" slot="right"></mt-button>
        </mt-header>
        
        <!--实现页面标题列表-->
        <div class="contain">
            <ul v-bind:style="{'width':totalWidth + 'px'}">
                <li @click="getImgpic(0)">全部</li>
                <li v-for="(x,index) in list" :key="index" @click="getImgpic(x.id)">{{x.title}}</li>
            </ul>
        </div>
        <!--实现图片列表页-->
        <div class='imglist'>
            <ul>
                <li v-for="(x,index) in imgList" :key='index'>
                    <router-link v-bind = "{to:'/photo/photoinfo/' + x.id}">
                        <img v-lazy="x.img_url">
                        <div class="desc">
                            <h5 v-text="x.title"></h5>
                            <p v-text="x.zhaiyao"></p>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
  </div>
</template>

<script>
    import apidomate from "../../kits/common.js";//导入公共域名地址
    import { Toast } from 'mint-ui'; //导入mint-ui 提示工具js
    export default {
        data(){
            return {
                list: [], //用来存储页面头部分类信息。
                totalWidth: 375,
                id: 0,
                imgList: [] //用来存储页面主体部分信息。
            }
        },
        created(){
            this.getImgList();
            var all = 0;//如果没有传参默认为0,获取所有数据
            this.getImgpic(all);
        },
        methods:{
            //页面顶部分类信息。
            getImgList(){
                const url = apidomate.picdoName + "/api/getimgcategory";
                this.$http.get(url).then(function(response){
                    if(response.body.status !== 0){ //如果status不是0则表明数据获取失败
                        Toast('获取信息失败，请刷新重试'); //弹出提示信息，并直接返回
                        return;
                    };
                    this.list = response.body.message;
                    var w = 65;//每个li的长度，估计的。
                    var conts = response.body.message.length + 1;//因为数据中不包括全部这一条，所以要加1
                    this.totalWidth = w * conts;
                });
            },
            //页面主题内容信息
            getImgpic(picId){
                var picId = picId || 0;//不填默认是0.
                const url = apidomate.picdoName + "/api/getimages/" + picId;//不填默认是0，会请求所有的数据。
                this.$http.get(url).then(function(response){
                    if(response.body.status !== 0){
                        Toast('获取信息失败，请刷新重试'); //弹出提示信息，并直接返回
                        return;
                    }
                    this.imgList = response.body.message;
                });
            }
        }
    }
</script>

<style scoped>
    /*导航列表*/
    .contain ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
        margin-bottom: 5px;
    }
    .contain li {
        display: inline-block;
        font-size: 14px;
        margin: 0 5px;
        color: blue;
        cursor: pointer;
    }
    .contain {
        width: 375px;
        max-width: 375px;
        overflow-x: auto; /*可以使滚动条在移动端自动隐藏*/
    }
    /*图片列表*/
    .imglist ul {
        padding: 0;
        margin-top: 0px;
    }
    .imglist li {
        margin: 0;
    }
    .imglist li {
        position: relative;
        list-style: none;
    }
    .imglist img {
        width: 100%;
        height: 300px;
    }
    .desc {
        padding-left: 5px;
        position: absolute;
        width: 100%;
        bottom: 2px;
        background-color: rgba(0,0,0,0.2);
    }
    .desc h5 {
        font-size: 16px;
        color: #fff;
        font-weight: 700;
    }
    .desc p {
        color: #fff;
    }
    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
</style>
